<template>
	<!-- 搜索框 -->
	<view class="head">
		<!-- @confirm 是一个事件修饰符，通常用于监听输入框（或类似表单元素）的 “确认” 操作， -->
		<input v-model="searchInfo" placeholder="搜索用户" class="searchText" @input="handleSearch" />
	</view>
	<!-- 显示搜索出来的列表 -->
	<view class="searchList">
		<view class="userInfo" v-for="item in searchLists" :key="item.id">
			<!-- ID -->
			<view class="id">{{item.id}}</view>
			<!-- 账号 -->
			<view class="name">
				<view class="label">账号</view>
				<view class="cotent">{{item.username}}</view>
			</view>
			<!-- 姓名 -->
			<view class="account">
				<view class="label">姓名</view>
				<view class="cotent">{{item.name}}</view>
			</view>
			<!-- 添加按钮 -->
			<button class="add" @click="add(item)">添加</button>

		</view>
	</view>


</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue'



	const searchInfo = ref('')
	const isAdd = ref(false)
	const searchLists = ref([]);
	const applyInfo = reactive({
		proposerRemark: '',
		targetUser: '',
		appliedReRemark: '',
	})


	// 获取token
	const token = uni.getStorageSync('token');

	const handleSearch = async () => {
		console.log(searchInfo.value);
		console.log(token);
		const friendList = await uni.request({
			url: 'http://192.168.1.200:8080/user/searchUser',
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			},
			data: {
				username: searchInfo.value,
			}
		})

		searchLists.value = friendList.data.data;
	}
	// 获取账号本人信息，若为本人不显示添加...

	const add = (item) => {
		console.log(item.username, item.name);
		// ${item.username}
		uni.navigateTo({
			url: `/pages/applyAddFreind/applyAddFreind?username=${item.username}&name=${item.name}&id=${item.id}`
		})
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.head {

		height: 80rpx;
		overflow: hidden;

		.searchText {
			background-color: lightblue;
			height: 40rpx;
			width: 60%;
			border-radius: 20rpx;
			margin: 20rpx auto;
			text-align: center;
		}
	}

	.searchList {
		// 占满剩余元素
		flex: 1;
		width: 90%;
		margin: 0 auto;
		display: flex;
		margin-top: 20rpx;
		// background: lightsalmon;

		.userInfo {
			display: flex;

			.id {
				margin: 0 50rpx;
				width: 80rpx;
				height: 80rpx;
				background-color: #d9f0ff;
				border-radius: 100%;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
			}

			.name {
				width: 100rpx;
				margin-left: 30rpx;
			}

			.account {
				width: 100rpx;
				margin-left: 30rpx;
			}

			.label {
				margin-bottom: 22rpx;
				color: #34aeff;
			}


			.add {
				margin-top: 20rpx;
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #d9f0ff;
				font-size: 20rpx;
			}
		}

	}
</style>